<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M851.794 704.174H796.16c-9.554 0-18.77-4.096-25.6-10.926l-.686-.686-269.988-299.684-20.142 21.842-.686.686a55.788 55.788 0 0 1-6.144 5.458c-.338 0-.338.338-.676.338-68.27 41.646-138.24 19.456-174.08 2.734a58.644 58.644 0 0 1-32.768-44.718c-2.734-19.456 4.772-38.564 19.456-51.538l138.24-118.446a103.68 103.68 0 0 1 67.236-24.914H605.01c24.238 0 47.79 8.53 67.932 24.914 44.708 37.212 122.194 62.464 179.538 73.728 1.71.348 2.386.348 3.758 1.024 10.578 3.42 16.384 15.022 12.964 25.948-3.41 10.24-13.65 15.698-23.89 13.65h-.686c-30.372-5.806-134.144-29.358-197.632-82.258-12.626-10.24-27.3-15.708-41.984-15.708H490.322a63.508 63.508 0 0 0-40.612 15.022L311.47 359.086a16.384 16.384 0 0 0-5.806 14.674c.686 5.806 4.434 10.926 9.554 13.312 27.996 13.312 82.606 30.72 134.144 0l27.996-30.382a31.58 31.58 0 0 1 20.48-9.892c9.216-.686 18.77 3.748 24.228 9.892l276.142 306.524h53.586c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zM491.346 384c.348 0 .348.338 0 0zm-251.218-38.226h-77.486c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h77.486c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zm193.198 494.244c-17.07 0-33.454-5.458-46.428-16.036L174.592 657.408a6.441 6.441 0 0 0-2.734-.686h-9.554c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h9.554c10.24 0 20.142 3.42 27.996 9.216L412.16 791.89c6.144 4.782 13.312 7.168 21.166 7.168 6.482 0 13.312-2.048 19.108-6.144a33.556 33.556 0 0 0 14.684-24.576 35.912 35.912 0 0 0-8.878-27.3l-89.088-94.894c-7.854-8.192-7.168-21.166 1.024-29.01 8.192-7.854 21.166-7.168 29.01 1.024l89.088 94.884c15.022 16.046 22.19 37.55 19.804 59.74a76.186 76.186 0 0 1-32.092 53.924s-.338 0-.338.348c-12.974 8.192-27.648 12.964-42.322 12.964z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M541.184 832.85c-16.384 0-32.082-5.458-45.394-15.36l-.348-.338-20.132-16.046c-8.878-7.168-10.24-19.794-3.42-28.672 7.168-8.868 19.804-10.24 28.672-3.41l19.804 16.046c6.144 4.434 13.312 6.82 20.48 6.82 5.458 0 10.24-1.024 15.012-3.41a33.812 33.812 0 0 0 18.78-23.552 33.69 33.69 0 0 0-6.83-29.01L475.986 624.64a20.48 20.48 0 0 1 2.734-28.672 20.48 20.48 0 0 1 28.672 2.734l91.822 111.268c15.012 17.756 20.48 41.308 15.36 64.174a74.353 74.353 0 0 1-41.308 51.538c-9.892 4.782-20.48 7.168-32.082 7.168z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M644.608 829.778c-20.142 0-38.574-7.506-52.224-21.504l-13.998-13.988c-7.844-7.854-7.844-20.828 0-29.02 7.854-7.844 20.828-7.844 29.02 0l13.988 13.998c6.144 6.144 14.336 9.216 23.552 9.216 5.806 0 11.612-1.71 16.732-4.434l12.626-7.516c8.878-5.12 15.022-13.65 16.722-23.552a34.703 34.703 0 0 0-7.168-27.648L575.662 592.896c-7.168-8.878-5.806-21.504 3.072-28.672 8.868-7.168 21.504-5.806 28.672 3.072L715.602 699.73c13.998 16.732 19.804 38.912 16.046 60.764-3.758 21.504-17.07 40.612-36.178 51.876l-12.636 7.516c-11.602 6.144-24.914 9.892-38.226 9.892z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M709.12 749.23c-7.854 0-15.36-4.444-18.77-12.288-4.444-10.24.338-22.528 10.578-26.972l35.154-15.36c10.24-4.434 22.528.348 26.972 10.588 4.434 10.24-.348 22.528-10.588 26.962l-35.154 15.36c-2.734 1.024-5.458 1.71-8.192 1.71zm283.31 7.844h-126.3a35.686 35.686 0 0 1-35.492-35.492V273.746c0-19.456 16.036-35.492 35.492-35.492h115.712c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48H871.598v436.9H992.43c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zm-844.8-40.612H36.69c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h105.472V270.674H36.69c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h110.94c19.456 0 35.492 16.046 35.492 35.502V680.96c0 19.456-16.036 35.502-35.492 35.502z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Icona3 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
